import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:loading_indicator_view/loading_indicator_view.dart';

class LoadingScreen extends StatefulWidget{
  @override
  _LoadingState createState() => _LoadingState();
}

class _LoadingState extends State<LoadingScreen>{
  int _orderNum = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(
        title: Text('各种不同的加载控件'),
      ),

      body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
           crossAxisCount: 4,
           childAspectRatio: 1.0,
        ),

        children: [
          wrapOrder(Center(child: LineSpinFadeLoaderIndicator())),
          wrapOrder(Center(child: BallBeatIndicator())),
          wrapOrder(Center(child: BallClipRotateMultipleIndicator())),
          wrapOrder(Center(child: BallGridPulseIndicator())),
          wrapOrder(Center(child: LineScaleIndicator())),
          wrapOrder(Center(child: BallPulseRiseIndicator())),
          wrapOrder(Center(child: BallScaleRippleMultipleIndicator())),
          wrapOrder(Center(child: BallZigZagIndicator())),
          wrapOrder(Center(child: BallScaleIndicator())),
          wrapOrder(Center(child: BallPulseSyncIndicator())),
          wrapOrder(Center(child: BallScaleMultipleIndicator())),
          wrapOrder(Center(child: BallPulseIndicator())),
          wrapOrder(Center(child: BallClipRotatePulseIndicator())),
          wrapOrder(Center(child: BallGridBeatIndicator())),
          wrapOrder(Center(child: SquareSpinIndicator())),
          wrapOrder(Center(child: BallSpinFadeLoaderIndicator())),
          wrapOrder(Center(child: BallScaleRippleIndicator())),
          wrapOrder(Center(child: SemiCircleSpinIndicator())),
          wrapOrder(Center(child: LineScalePulseOutIndicator())),
          wrapOrder(Center(child: BallClipRotateIndicator())),
          wrapOrder(Center(child: PacmanIndicator())),
          wrapOrder(Center(child: BallRotateIndicator())),
          wrapOrder(Center(child: CubeTransitionIndicator())),
          wrapOrder(Center(child: TriangleSkewSpinIndicator())),
        ],
      ),
    );
  }

  @override
  void didUpdateWidget(LoadingScreen oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget != widget) {
      _orderNum = 1;
    }
  }

  Widget wrapContainer(Widget child, [Color backgroundColor = Colors.green]) =>
      Container(color: backgroundColor, child: child);

  Widget wrapOrder(Widget child) => Stack(children: <Widget>[
    child,
    Positioned(
      left: 8,
      bottom: 0,
      child: Text("${_orderNum++}",
          style: TextStyle(color: Colors.white, fontSize: 18)),
    ),
  ]);
}